/* 路由主视图过渡动画---右滑 */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s;
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 路由主视图过渡动画---透明 */
.opacity-enter-active,
.opacity-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}
.opacity-enter,
.opacity-leave-active {
  opacity: 0;
}

/* 面包屑动画 */
.breadcrumb-enter-active {
  transition: all 0.3s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}

/* 锁屏过渡动画 */
.slide-up-enter-active {
  animation: slide-up 0.5s;
}

.slide-up-leave-active {
  animation: slide-up 0.5s reverse;
}

@keyframes slide-up {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
